import * as THREE from 'three'
import createApp from '../../core'

function createHemisphereLight (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-120, 80, 120)
  camera.lookAt(scene.position)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const { ambientColor, ambientIntensity, skyColor, groundColor, HemisphereIntensity, x, y, z } = data
  const ambient = new THREE.AmbientLight(ambientColor, ambientIntensity)
  scene.add(ambient)

  const hemisphereLight = new THREE.HemisphereLight(skyColor, groundColor, HemisphereIntensity)
  hemisphereLight.position.set(x, y, z)
  scene.add(hemisphereLight)

  const helper = new THREE.HemisphereLightHelper(hemisphereLight, 30, 0xff0000)
  scene.add(helper)

  const planeGeometry = new THREE.PlaneGeometry(200, 200)
  const material = new THREE.MeshLambertMaterial({ color: 0xffffff })
  const plane = new THREE.Mesh(planeGeometry, material)
  plane.rotateX(-Math.PI / 2)
  scene.add(plane)

  const boxGeometry = new THREE.BoxGeometry(30, 30, 30)
  const boxMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff })
  const box = new THREE.Mesh(boxGeometry, boxMaterial)
  box.position.set(0, 30, 0)
  scene.add(box)

  const folder1 = gui.addFolder('环境光参数')
  folder1.addColor(data, 'ambientColor').onChange(() => {
    ambient.color = new THREE.Color(data.ambientColor)
  })
  folder1.add(data, 'ambientIntensity', 0, 10).onChange(() => {
    ambient.intensity = data.ambientIntensity
  })

  const folder2 = gui.addFolder('半球光源参数')
  folder2.addColor(data, 'skyColor').onChange(() => {
    hemisphereLight.color = new THREE.Color(data.skyColor)
  })
  folder2.addColor(data, 'groundColor').onChange(() => {
    hemisphereLight.color = new THREE.Color(data.groundColor)
  })
  folder2.add(data, 'HemisphereIntensity', 0, 10).onChange(() => {
    hemisphereLight.intensity = data.HemisphereIntensity
  })

  const folder3 = gui.addFolder('半球光源位置')
  folder3.add(data, 'x', -100, 100).onChange(() => {
    hemisphereLight.position.x = data.x
    helper.update()
  })
  folder3.add(data, 'y', -100, 100).onChange(() => {
    hemisphereLight.position.y = data.y
    helper.update()
  })
  folder3.add(data, 'z', -100, 100).onChange(() => {
    hemisphereLight.position.z = data.z
    helper.update()
  })
}

const data = {
  ambientColor: 0x000000,
  ambientIntensity: 1,
  skyColor: 0xffffff,
  groundColor: 0xff0000,
  HemisphereIntensity: 1,
  x: 0,
  y: 100,
  z: 0
}

export {
  createHemisphereLight
}
